<template>
  <div class="page-style">
    <aside>
      <el-form label-width="100px" :model="form" :inline="true">
        <el-form-item label="结果选择">
          <radio-comp :radio-arr="radioArr" @radioVal="radioVal" />
        </el-form-item>
        <el-form-item label="条码规格">
          <el-select v-model="value" placeholder="请选择条码规格">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="输入条码">
          <el-input v-model="form.code_num" placeholder="请输入条形码" style="width:250px" clearable />
          <el-button type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </aside>
    <tab v-if="tabData.length" :table-header="tableHeader" :tab-data="tabData" />
  </div>
</template>

<script>
import radioComp from '@/components/radioComp'
import tab from './components/bar-code-tracing/bar-code-tracing-tab'
export default {
  components: {
    radioComp,
    tab
  },
  data() {
    return {
      tabData: [
        {
          id: 1,
          code_num: '123'
        }
      ],
      form: {
        code_num: ''
      },
      value: '',
      options: [
        {
          value: 1,
          label: '大码'
        },
        {
          value: 2,
          label: '中码'
        },
        {
          value: 3,
          label: '小码'
        }
      ],
      radioValue: 1,
      radioArr: [
        {
          label: 0,
          text: '产品信息'
        },
        {
          label: 1,
          text: '自己发货记录'
        },
        {
          label: 2,
          text: '所有发货记录（包含下级客户发货记录）'
        },
        {
          label: 3,
          text: '仓库记录'
        }
      ]
    }
  },
  computed: {
    tableHeader: function() {
      let arr = []
      if (this.radioValue === 0) {
        arr = [
          {
            id: 1,
            label: '大条码',
            prop: 'code_num'
          },
          {
            id: 2,
            label: '中条码',
            prop: 'code_num'
          },
          {
            id: 3,
            label: '小条码',
            prop: 'code_num'
          },
          {
            id: 4,
            label: '产品代码',
            prop: 'code_num'
          },
          {
            id: 5,
            label: '产品名称',
            prop: 'code_num'
          },
          {
            id: 6,
            label: '品牌',
            prop: 'code_num'
          },
          {
            id: 7,
            label: '规格',
            prop: 'code_num'
          },
          {
            id: 8,
            label: '批号',
            prop: 'code_num'
          },
          {
            id: 9,
            label: '生产日期',
            prop: 'code_num'
          },
          {
            id: 10,
            label: '有效日期',
            prop: 'code_num'
          },
          {
            id: 11,
            label: '状态',
            prop: 'code_num'
          }
        ]
      } else if (this.radioValue === 1) {
        arr = [
          {
            id: 1,
            label: '小条码',
            prop: 'code_num'
          },
          {
            id: 2,
            label: '出货单号',
            prop: 'code_num'
          },
          {
            id: 3,
            label: '出货时间',
            prop: 'code_num'
          },
          {
            id: 4,
            label: '发出客户名称',
            prop: 'code_num'
          },
          {
            id: 5,
            label: '客户类别/客户编号',
            prop: 'code_num'
          },
          {
            id: 6,
            label: '目标客户名称',
            prop: 'code_num'
          },
          {
            id: 7,
            label: '客户类型',
            prop: 'code_num'
          },
          {
            id: 8,
            label: '总数量',
            prop: 'code_num'
          }
        ]
      } else if (this.radioValue === 2) {
        arr = [
          {
            id: 1,
            label: '小条码',
            prop: 'code_num'
          },
          {
            id: 2,
            label: '出货单号',
            prop: 'code_num'
          },
          {
            id: 3,
            label: '出货时间',
            prop: 'code_num'
          },
          {
            id: 4,
            label: '发出客户名称',
            prop: 'code_num'
          },
          {
            id: 5,
            label: '客户类别/客户编号',
            prop: 'code_num'
          },
          {
            id: 6,
            label: '目标客户名称',
            prop: 'code_num'
          },
          {
            id: 7,
            label: '客户类型',
            prop: 'code_num'
          },
          {
            id: 8,
            label: '总数量',
            prop: 'code_num'
          },
          {
            id: 8,
            label: '上传时间',
            prop: 'code_num'
          }
        ]
      } else if (this.radioValue === 3) {
        arr = [
          {
            id: 1,
            label: '序号',
            prop: 'code_num'
          },
          {
            id: 2,
            label: '小条码',
            prop: 'code_num'
          },
          {
            id: 3,
            label: '类别',
            prop: 'code_num'
          },
          {
            id: 4,
            label: '单号',
            prop: 'code_num'
          },
          {
            id: 5,
            label: '单据时间',
            prop: 'code_num'
          },
          {
            id: 6,
            label: '简要',
            prop: 'code_num'
          },
          {
            id: 7,
            label: '此单总数',
            prop: 'code_num'
          },
          {
            id: 8,
            label: '备注',
            prop: 'code_num'
          },
          {
            id: 9,
            label: '录入时间',
            prop: 'code_num'
          }
        ]
      }
      return arr
    }
  },
  methods: {
    radioVal(val) {
      console.log(val)
      this.radioValue = val
    }
  }
}
</script>

<style lang="scss" scoped>
  .text-style {
    font-size: 12px;
    // font-weight: bold;
    color: #000;
  }
</style>
